<template>
  <el-drawer
    title="服务购买"
    :visible.sync="orderDetailVisible"
    size="40%"
    style="margin-left: 10px"
    
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      :rules="rules"
      label-width="128px"
      label-position="right"
    >
      <el-form-item label="律师名称" prop="lawyerName">
        <span>{{ lawyerName }}</span>
      </el-form-item>
      <el-form-item label="金额" prop="amount">
        <span>{{ dataForm.amount }}元/半小时</span>
      </el-form-item>
      <el-form-item label="提示信息:" style="color:red">
        <span style="color:red">先选择日期再选择时间(若服务时间不可选说明该律师当天无可服务时间)</span>
      </el-form-item>
      <el-form-item label="日期" prop="serviceDate">
        <el-date-picker clearable size="small"
          v-model="dataForm.serviceDate"
          type="date"
          @change="selectDate"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="服务时间" prop="serviceTime">
        <el-select clearable size="small" v-model="dataForm.serviceTime" :disabled="timeDisable">
          <el-option
            v-for="dict in timeOptions"
            :key="dict"
            :label="dict"
            :value="dict"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dataForm.name" placeholder="请输入姓名" style="width:160px"/>
      </el-form-item>
      <el-form-item label="联系方式" prop="customerTel">
        <el-input v-model="dataForm.customerTel" placeholder="请输入联系方式" style="width:160px"/>
        <span style="color:red">请确认所留电话号码为正确的电话号码</span>
      </el-form-item>
      <el-form-item>
       
      </el-form-item>
      <el-form-item >
        <template>
          <el-button @click="payment(dataForm)">支付</el-button>
        </template>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script>
import {pay} from '@/api/business/pay';
import {listLawyerTime} from "@/api/business/lawyertime"
export default {
  data() {
    return {
      oneArray:[],
      twoArray:[],
      templates:[],
      //禁用掉当前系统时间之前的时间
      pickerOptions: {
         disabledDate(time) {
            return time.getTime() < Date.now() ;
          },
        },      
      timeDisable:true,
      timeOptions:[],
      orderDetailVisible: false,
      lawyerName:'',
      dataForm: {
        lawyerCode: undefined,
        amount: '',
        serviceDate:undefined,
        serviceTime:undefined,
        name:'',
        customerTel:""
      },
      queryParams:{
        lawyerCode:"",
        timeDate:"",
      },
      // 表单校验
      rules: {
        serviceDate:[
          { required: true, trigger: "blur", message: "服务日期不能为空" }
        ],
        serviceTime: [
          { required: true, trigger: "blur", message: "服务时间不能为空" }
        ],
        name: [
          { required: true, trigger: "blur", message: "姓名不能为空" }
        ],
        customerTel: [
          { required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    //获取可用时间段
    selectDate(val){
      this.timeDisable = true;
      this.dataForm.serviceTime = undefined;
      this.queryParams.lawyerCode = this.dataForm.lawyerCode;
      this.queryParams.timeDate = val;
      console.log(this.queryParams)
      listLawyerTime(this.queryParams).then(response=>{
        console.log("返回的信息")
        //  let template = response.rows[0].timeArray;
        //得到未被选择的时间段
        console.log(response.rows[0]);
        let first = response.rows[0].timeArray;
        this.oneArray = first.split(",");
        let second = response.rows[0].selectTime;
        console.log(second)
        if(second === null){
          console.log("进入了if")
          this.templates = this.oneArray;
        }
        else{
          console.log("进入了else")
           this.twoArray = second.split(",");
           this.templates = this.oneArray.filter(items=>{
           if(!this.twoArray.includes(items))
             return items;
            })
        }
        this.timeOptions = this.templates;
        console.log(this.timeOptions)
        if(this.timeOptions===undefined||this.timeOptions == null){
          console.log("wwwwwwww")
          alert("当天该律师无可服务时间");
        }
        this.timeDisable = false;
      })
    },
    //初始化
    init(paramList) {
      this.lawyerName = paramList.lawyerName;
      this.dataForm.lawyerCode = paramList.lawyerCode;
      this.dataForm.amount = paramList.tariffStandard;
      this.orderDetailVisible = true;

    //   getOldCustomerDetails(this.query).then((response) => {
    //     this.dataList = response.data.data;
    //     console.log(this.dataList);
    //     this.oldCustomerDetailVisible = true;
    //   });
    },
    //点击支付按钮之后
    payment(data){
      pay(data).then(response=>{
        const divForm = document.getElementsByTagName('div')
                if (divForm.length) {
                    document.body.removeChild(divForm[0])
                }
        const div = document.createElement('div')
                div.innerHTML = response // data就是接口返回的form 表单字符串
                document.body.appendChild(div)
                document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                document.forms[0].submit()
      })
    }
  },
};
</script>
<style>

</style>